<template>
	<view class="content">
		<u-bar-height></u-bar-height>
		
		<view class="back" :style="{top: barHeight + 'px'}" @tap="back"><uni-icons type="left" color="#000" size="26"></uni-icons></view>
		
		<view class="avatar">
			<image :src="coverPic" mode=""></image>
		</view>
		
		<view class="areist_info">
			<view>{{name}}</view>
			<view>{{number}}</view>
			<view>排名</view>
		</view>
		
		<view class="introduce_box">
			<view class="introduce">
				<view class="top">
					<view class="line"></view>
					<view class="title">艺人介绍</view>
					<view class="line"></view>
				</view>
				<view class="txt">{{briefDesc}}</view>
			</view>
		</view>
		
		<view class="introduce_box" v-for="(item, index) in introduction" :key="index">
			<view class="introduce" :class="item.open ? '' : 'height'">
				<view class="top">
					<view class="line"></view>
					<view class="title">{{item.ti}}</view>
					<view class="line"></view>
				</view>
				<view class="txt">{{item.txt}}</view>
			</view>
			<view class="show" @tap="open(index)" v-if="item.open">
				<view class="">展开阅读全文</view>
				<view class=""><uni-icons type="bottom" color="#1b73d6" size="20"></uni-icons></view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {artistDetail, artistDesc} from '@/API/API.js';
	import util from '@/utils/util.js';
	export default {
		data(){
			return {
				name: '',
				coverPic: '',
				number: '',
				briefDesc: '',
				introduction: [],
				barHeight: 0
			}
		},
		
		onLoad(option) {
			this.artistDetail(option);
			this.artistDesc(option);
		},
		
		onShow() {
			uni.$emit('closePopup', this.ref);
			this.barHeight = getApp().globalData.barHeight;
		},
		
		methods: {
			back(){
				util.jump('navigateBack', '');
			},
			
			artistDesc(id){
				artistDesc(id).then(data => {
					data.introduction.forEach((val, key)=>{
						if(key === 2){
							data.introduction[key].open = false;
						}else{
							data.introduction[key].open = true;
						}

					});
					
					this.introduction = data.introduction;
				});
			},
			
			artistDetail(id){
				artistDetail(id).then(data => {
					this.number = data.data.artist.rank ? data.data.artist.rank.rank : '暂无';
					this.name = data.data.artist.name;
					this.coverPic = data.data.artist.cover;
					this.briefDesc = data.data.artist.briefDesc;
				});
			},
			
			open(index){
				this.introduction.forEach((val, key)=> {
					if(index === key){
						this.introduction[key].open = false;
					}
				})
			}
		}
	}
</script>

<style>
	.back{
		padding: 8px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9;
	}
	
	.avatar{
		width: 100%;
		height: 260px;
		position: relative;
	}
	
	.avatar image{
		width: 100%;
		height: 100%;
	}
	
	.areist_info{
		width: 94%;
		background-color: hsla(0,0%,100%,.9);
		border-radius: 10px;
		padding: 10px 0;
		font-size: 14px;
		line-height: 1.7;
		text-align: center;
		margin-top: -9%;
		z-index: 9;
	}
	
	.areist_info view:last-child{
		font-size: 12px;
		color: red;
	}
	
	.introduce_box{
		width: 90%;
		background-color: #fff;
		padding: 16px 10px;
		border-radius: 8px;
		margin-top: 10px;
	}
	
	.introduce{
		width: 100%;
		height: 186px;
		overflow: hidden;
	}
	
	.top{
		width: 100%;
		display: flex;
		align-items: center;
		padding: 16px 0;
	}
	
	.line{
		width: 100%;
		height: 1px;
		background-color: #ccc;
	}
	
	.title{
		text-align: center;
		white-space: nowrap;
		font-size: 14px;
		font-weight: bold;
		padding: 0 10px;
		
	}
	
	.txt{
		font-size: 13px;
		line-height: 1.5;
		text-indent: 2em;
	}
	
	.show{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 13px;
		color: #1b73d6;
	}
	
	.height{
		height: auto !important; 
	}
</style>